<template>
  <!--注册-->
  <div class="wrap">
    <div v-if="step === 1" class="tdbModule register">
      <div class="registerTitle">注册账户</div>
      <div class="registerLc1">
        <p class="p1">填写账户信息</p>
        <p class="p2">注册成功</p>
      </div>

      <div class="registerCont">
        <ul>
          <li>
            <span class="dis"></span>
            <input v-model="userInfo.userType" type="radio" value="1" />
            我要投资
            <input v-model="userInfo.userType" type="radio" value="2" />
            我要借钱
          </li>
          <li class="telNumber">
            <span class="dis">手机号码</span>
            <input class="input" v-model="userInfo.mobile" />
            <button v-if="!sending" class="button" @click="send()">
              获取验证码
            </button>
            <button v-else disabled class="button disabled">
              {{ leftSecond }}秒后重发
            </button>
          </li>

          <li>
            <span class="dis">短信验证码</span>
            <input class="input" v-model="userInfo.code" />
            <span class="info">
              请输入验证码
            </span>
          </li>

          <li>
            <span class="dis">密码</span>
            <input type="password" v-model="userInfo.password" class="input" />
            <span class="info">
              6-24个字符，英文、数字组成，区分大小写
            </span>
          </li>

          <li class="agree">
            <input type="checkbox" checked />
            我同意《<NuxtLink to="#" target="_black">尚融宝注册协议</NuxtLink>》
            <span>请查看协议</span>
          </li>
          <li class="btn">
            <button @click="register()">
              下一步
            </button>
          </li>
        </ul>
      </div>
    </div>

    <div v-if="step === 2" class="tdbModule register">
      <div class="registerTitle">注册账户</div>
      <div class="registerLc2">
        <p class="p1">填写账户信息</p>
        <p class="p2">注册成功</p>
      </div>
      <div class="registerCont">
        <ul>
          <li class="scses">
            {{ this.userInfo.mobile }} 恭喜您注册成功！
            <NuxtLink class="blue" to="/login">
              请登录
            </NuxtLink>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import "~/assets/css/register.css";
export default {
  data() {
    return {
      step: 1, //注册步骤
      userInfo: {
        userType: 1,
      },
      sending: false, // 是否发送验证码
      second: 10, // 倒计时间
      leftSecond: 0, //剩余时间
      timer: {},
    };
  },

  methods: {
    //发短信
    send() {
      //1、前端校验手机号格式： 手机号长度必须等于11位
      if (!this.userInfo.mobile || this.userInfo.mobile.length != 11) {
        this.$message.warning("请输入正确的手机号码");
        return;
      }
      //判断如果验证码是已发送的状态  不能在获取验证码
      if (this.sending) {
        return;
      }
      //禁用按钮，防止重复发送获取验证码的请求
      this.sending = true; //隐藏获取验证码按钮 显示倒计时的按钮
      //2、访问后端发送短信验证码接口
      // 因为nuxt.config.js中已经定义了axios的全局参数baseURL服务器地址，所以 可以直接写资源路径访问
      this.$axios
        .$get(`/api/sms/sendMsg/${this.userInfo.mobile}/1`)
        //当响应拦截器放行的响应报文状态码为200时会进入
        .then((r) => {
          if (r.code === 0) {
            console.log(r);
            this.$message.success(r.msg);
          } else {
            //响应体中的r对象的code值不是0时
            this.$message.error(r.msg);
            this.sending = false;
            //取消之前的定时任务
            clearInterval(this.timer);
          }
        });
      this.timeDown();
    },

    //倒计时
    timeDown() {
      //3、并在倒计时按钮上显示60秒倒计时
      this.leftSecond = 20; //每一秒更新一次
      //4、60秒后按钮显示重新获取验证码，取消按钮禁用
      // setTimeout(fun , 时间) 指定时间后 执行一次函数
      this.timer = setInterval(() => {
        this.leftSecond--;
        if (this.leftSecond === 0) {
          //结束定时任务
          clearInterval(this.timer);
          //显示重新获取验证码 取消按钮禁用
          this.sending = false;
        }
      }, 1000); //每过1秒执行一次定时任务
    },

    //注册
    register() {
      //提交注册请求
      this.$axios({
        // baseURL
        url: "/api/core/userInfo/register",
        method: "POST",
        data: this.userInfo,
      }).then((r) => {
        console.log(r);
        this.$message.success(r.data.msg);
        //跳转到注册成功页面
        this.step = 2;
      });
    },
  },
};
</script>
